<template>
  <div class="cart-page">
    <div class="header">
      <van-icon name="arrow-left" @click="back" />
      <p class="must-read" @click="$router.push('/article/468172')">购前必读</p>
      <span class="edit">编辑</span>
    </div>
    <div v-if="!loading" class="body">
      <!-- <p>{{ checkList }}</p> -->
      <div class="contain">
        <BookCard
          v-for="c in cartListData"
          :id="c.bookId"
          :key="c.bookId"
          :coverKey="c.cover"
          :name="c.bookName"
          :type="c.bookSaleTypeId"
          :price="c.bestPrice"
          :quantity="c.quantity"
          :checked="c.checked"
          @setChecked="setChecked"
        ></BookCard>
      </div>
      <!-- 底部结算 -->
      <van-submit-bar
        :price="priceSun"
        button-text="结算"
        button-color="#2c59b7"
        button-type="square"
        @submit="toPay"
      >
        <van-checkbox
          v-model="isCheckAll"
          checked-color="#2c59b7"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { CartAPI } from "../apis";
import BookCard from "../components/BookCard.vue";
export default {
  data() {
    return {
      loading: true,
      // 购物车数据
      cartListData: [],
    };
  },
  mounted() {
    this.loading = true
    this.getCartData();
  },
  computed: {
    // 被选中的商品
    checkList() {
      return this.cartListData.filter((item) => item.checked);
    },
    // 选中依赖
    isCheckAll: {
      get() {
        // 长度对比
        return this.cartListData.filter(c=>c.checked).length == this.cartListData.length && this.cartListData.length!=0
      },
      set(v){
        console.log(v);
        this.cartListData.forEach( item => {
          item.checked = v 
        });
      }
    },
    // 总价
    priceSun() {
      let sun = 0;
      this.checkList.forEach((item) => {
        sun += item.bestPrice * 100;
      });
      return sun;
    },
  },
  methods: {
    // to son answer
    setChecked(id, v) {
      this.cartListData.filter((item) => item.bookId == id)[0].checked = v;
    },
    // 网络请求
    async getCartData() {
      let { data } = await this.$http(CartAPI, {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      // 往cartListData中插入checked属性
      this.cartListData = data.invalidCartItems.map((item) => {
        item.checked = false;
        return item;
      });
      // 选择缓存
      this.checkFunc();
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 回退
    back() {
      this.$router.go(-1);
    },
    // to pay
    toPay() {
      localStorage.setItem("checkList", JSON.stringify(this.checkList));
      this.$router.push("/pay");
    },
    // 选择缓存
    checkFunc() {
      let arr = JSON.parse(localStorage.getItem("checkList")).map(
        (item) => item.bookId
      );
      // 原数组的遍历
      this.cartListData.forEach((item) => {
        arr.forEach((a) => {
          if (a == item.bookId) {
            item.checked = true;
          }
        });
      });
    },
    // // 状态 全选 & 全不选
    // reverse() {
    //   this.isCheckAll = !this.isCheckAll
    // },
  },
  components: {
    BookCard,
  },
};
</script>

<style lang="scss" scoped>
.cart-page {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--more-bg-white);
    .must-read {
      color: var(--theme-blue);
      font-size: 16px;
      text-align: center;
      line-height: 21px;
      text-decoration: underline;
      margin-left: 15px;
    }
    .edit {
      color: var(--theme-blue);
      font-size: 16px;
      line-height: 21px;
      text-align: right;
    }
  }
  .body {
    padding: 55px 0;
    .van-submit-bar {
      border-top: 1px solid var(--more-bg-white);
      .van-submit-bar__bar {
        padding: 0 0 0 15px;
        .goods-card {
          margin: 0;
          background-color: #fff;
        }
        .van-submit-bar__price {
          color: var(--book-name-font-black);
        }
        .van-button {
          box-sizing: border-box;
          width: 78px;
          height: 50px;
          padding: 15px 25px;
        }
      }
    }
  }
}
</style>